﻿@{
    ViewBag.Title = "Calendar";
}

<div class="page-content">
    <div class="page-header">
        <h1>Full Calendar
			<small>
                <i class="icon-double-angle-right"></i>
                with draggable and editable events
            </small>
        </h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="row">
                <div class="col-sm-9">
                    <div class="space"></div>

                    <div id="calendar"></div>
                </div>

                <div class="col-sm-3">
                    <div class="widget-box transparent">
                        <div class="widget-header">
                            <h4>{未开始 & 待安排}工作</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <div id="external-events" data-bind="template: { foreach: todos, afterAdd: TodoItemDragInit }">
                                    <div class="external-event" data-bind="
                                        css: {
                                            'label-grey': state() == $$.TodoStateEnum.NotStart,
                                            'label-success': state() == $$.TodoStateEnum.Complete,
                                            'label-info': state() == $$.TodoStateEnum.Handing
                                        },
                                        attr: {
                                            'data-start': start,
                                            'data-end': end,
                                            'data-description': description,
                                            'data-class': $element.className
                                        }
                                        ">
                                        <i class="icon-move"></i>
                                        <!-- ko text: title -->
                                        <!-- /ko -->
                                    </div>
                                </div>
                                <label class="external-event label-purple" data-bind="click: addTodo">
                                    <i class="icon-move"></i>
                                    添加工作
                                </label>

                                <label>
                                    <input type="checkbox" class="ace ace-checkbox" id="drop-remove" />
                                    <span class="lbl">Remove after drop</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>
<!-- /.page-content -->

<div class="modal fade" id="modelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-bind="with: todoForEdit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">任务明细</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="iptTitle" class="col-lg-2 control-label">Title</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" id="iptTitle" placeholder="Title" data-bind="value: title" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="iptDescription" class="col-lg-2 control-label">Description</label>
                        <div class="col-lg-10">
                            <textarea class="form-control" id="iptDescription" placeholder="Description" data-bind="value: description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dtStart" class="col-lg-2 control-label">StartAt</label>
                        <div class="col-lg-10">
                            <input type="datetime-local" class="form-control" id="dtStart" data-bind="value: start" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dtEnd" class="col-lg-2 control-label">EndAt</label>
                        <div class="col-lg-10">
                            <input type="datetime-local" class="form-control" id="dtEnd" data-bind="value: end" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnOK">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


@section cssPagePlugin {
    @AssetsHelper.RenderCss(paths: "jquery.ui.fullcalendar.css")
}
@section styles {
}
@section jsPagePlugin {
    @AssetsHelper.RenderJS(paths: new[] { "jquery.ui", "jquery.ui.touch-punch" })
    @AssetsHelper.RenderJS(paths: "jquery.ui.fullcalendar.js")
}
@section scripts {
    @AssetsHelper.RenderJS(paths: "/assets/js/manage-calender.js")
    <script type="text/javascript">
        jQuery( function ( $ ) {

            $$.TodoStateEnum = {
                NotStart: 1,
                Handing: 2,
                Complete: 3
            }

            /* initialize the calendar
            -----------------------------------------------------------------*/

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            var calendar = $( '#calendar' ).fullCalendar( {
                buttonText: {
                    prev: '<i class="icon-chevron-left"></i>',
                    next: '<i class="icon-chevron-right"></i>'
                },

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: [
                    {
                        title: 'All Day Event',
                        start: new Date( y, m, 1 ),
                        className: 'label-important'
                    },
                    {
                        title: 'Long Event',
                        start: new Date( y, m, d - 5 ),
                        end: new Date( y, m, d - 2 ),
                        className: 'label-success'
                    },
                    {
                        title: 'Some Event',
                        start: new Date( y, m, d - 3, 16, 0 ),
                        allDay: false
                    }
                ],
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function ( date, allDay ) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $( this ).data( 'eventObject' );
                    var $extraEventClass = $( this ).attr( 'data-class' );


                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend( {}, originalEventObject );

                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    if ( $extraEventClass ) copiedEventObject['className'] = [$extraEventClass];

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $( '#calendar' ).fullCalendar( 'renderEvent', copiedEventObject, true );

                    // is the "remove after drop" checkbox checked?
                    if ( $( '#drop-remove' ).is( ':checked' ) ) {
                        // if so, remove the element from the "Draggable Events" list
                        $( this ).remove();
                    }

                }
                ,
                selectable: true,
                selectHelper: true,
                select: function ( start, end, allDay ) {

                    bootbox.prompt( "New Event Title:", function ( title ) {
                        if ( title !== null ) {
                            calendar.fullCalendar( 'renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true // make the event "stick"
                            );
                        }
                    } );


                    calendar.fullCalendar( 'unselect' );

                }
                ,
                eventClick: function ( calEvent, jsEvent, view ) {

                    var form = $( "<form class='form-inline'><label>Change event name &nbsp;</label></form>" );
                    form.append( "<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> " );
                    form.append( "<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>" );

                    var div = bootbox.dialog( {
                        message: form,

                        buttons: {
                            "delete": {
                                "label": "<i class='icon-trash'></i> Delete Event",
                                "className": "btn-sm btn-danger",
                                "callback": function () {
                                    calendar.fullCalendar( 'removeEvents', function ( ev ) {
                                        return ( ev._id == calEvent._id );
                                    } )
                                }
                            },
                            "close": {
                                "label": "<i class='icon-remove'></i> Close",
                                "className": "btn-sm"
                            }
                        }

                    } );

                    form.on( 'submit', function () {
                        calEvent.title = form.find( "input[type=text]" ).val();
                        calendar.fullCalendar( 'updateEvent', calEvent );
                        div.modal( "hide" );
                        return false;
                    } );


                    //console.log(calEvent.id);
                    //console.log(jsEvent);
                    //console.log(view);

                    // change the border color just for fun
                    //$(this).css('border-color', 'red');

                }

            } );
        } )
    </script>
}